<!--
 * @Author: hu_binbin
 * @Date: 2021-08-07 16:39:47
 * @LastEditTime: 2021-08-09 18:10:26
 * @Description: 开始任务
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" />
			</template>
		</Theader>

		<!-- 列表区域 -->
		<div class="content">
            <div class="doc-wrapper m-top">
                <van-cell class="item-title" is-link @click="arrowDirection('baseV')" :arrow-direction="baseV">
                    <template slot="title">
                        <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                        <span style="margin-left: 0.4rem;">基本要求</span>
                    </template>
                </van-cell>
                <div v-show="baseV=='down'">
                    <van-field 
                        label="天气:"  
                        readonly 
                        :border="false"
                        v-model="taskDetail.weather"
                    />
                    <van-field 
                        label="气温:" 
                        readonly 
                        :border="false"
                        v-model="taskDetail.voltageLevel" 
                    />
                    <van-field
                        label="开始时间:" 
                        :border="false"  
                        readonly 
                        v-model="taskDetail.beigain" 
                    >
                        <template slot="right-icon">
                            <van-image style="position: relative;top: 0.2rem;"
                            @click="isDatePicker=true"  width="24" height="24" :src="icon.iconDate"/>
                        </template>
                    </van-field> 
                    
                    <van-field
                        label="巡视人员:" 
                        readonly 
                        :border="false" 
                        v-model="taskDetail.person" 
                        right-icon="arrow"/>
    
                    <van-field
                        label="作业类型:" 
                        readonly 
                        :border="false" 
                        v-model="taskDetail.workType" 
                        right-icon="arrow"/>
                    
                    <van-field
                        label="未消缺缺陷:" 
                        readonly 
                        :border="false" 
                        v-model="taskDetail.defect" 
                        right-icon="arrow"/>
                    
                    <van-field
                        label="未消缺隐患:" 
                        readonly 
                        :border="false" 
                        v-model="taskDetail.hidden" 
                        right-icon="arrow"/>
                    
                </div>
            </div>
            <div class="doc-wrapper">
                <van-cell class="item-title" :arrow-direction="tourR=='down'?'up':'down'" is-link>
                    <template slot="title">
                        <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                        <span style="margin-left: 0.4rem;">巡视要求</span>
                    </template>
                </van-cell>
            </div>
            <div class="doc-wrapper">
                <van-cell class="item-title" :arrow-direction="danger=='down'?'up':'down'" is-link>
                    <template slot="title">
                        <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                        <span style="margin-left: 0.4rem;">危险点信息</span>
                    </template>
                </van-cell>
            </div>
            <div class="doc-wrapper">
                <van-cell class="item-title" is-link>
                    <template slot="title">
                        <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                        <span style="margin-left: 0.4rem;">机器人巡视</span>
                    </template>
                </van-cell>
            </div>
            <div class="doc-wrapper">
                <van-cell class="item-title" :arrow-direction="workCard=='down'?'up':'down'" is-link>
                    <template slot="title">
                        <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                        <span style="margin-left: 0.4rem;">作业卡</span>
                    </template>
                </van-cell>
            </div>
        </div>
        <div class="btn">
            <van-button style="width: 45%;" type="primary" plain color="#666666" size="small">完成准备</van-button>
            <van-button style="width: 45%;" type="primary" color="#0EB295" size="small">立即执行</van-button>
        </div>
	</article>
</template>
<script>
	import Theader from "../component/header"
	export default {
		name: "begainTask",
		components:{
			Theader
		},
		data() {
			return {
                title: "新建任务",
                taskDetail: {
                    weather:"东善桥变",
                    voltageLevel:"500Kv",
                    beigain:"2021/07/07 18:30:00",
                    person:"张爱国、王染",
                    workType:"人工巡视",
                    defect:"1",
                    hidden:"1",
                },
                icon: {
                    iconDate: require("../../../../assets/tour/icon-date.png"),
                    iconTitle: require("../../../../assets/tour/icon-title.png"),
                    iconBack: require("../../../../assets/tour/icon_back.png")
                },
                selTourPerson: [
                    {userName:"张爱国"},
                    {userName:"你染"},
                   
                ],
                showTourPerson: false,
                showTourType:false,
                isDatePicker:false,
                baseV: "down",
                tourR:"down",
                danger:"down",
                workCard:"down"
			}
		},
		computed: {

		},
		methods: {
            /**
             * @description: 箭头方向
             * @param {*}
             * @return {*}
             */
            arrowDirection(name) {
                switch(name){
                    case "baseV":
                        this.baseV = this.baseV == "down" ? "up" : "down"
                        return
                    case "tourR":
                        this.tourR = this.tourR == "down" ? "up" : "down"
                        return
                    case "danger":
                        this.danger = this.danger == "down" ? "up" : "down"
                        return;
                    case "workCard":
                        this.workCard = this.workCard == "down" ? "up" : "down"
                        return
                }
            }
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #F5F6F7 ;
    }
    .m-top{
        margin-top: 3.7rem;
    }
    .doc-wrapper{
        margin-bottom: 0.7rem;
        margin-right: 0.7rem;
        margin-left: 0.7rem;
        box-shadow: 0px 0px 4px 2px #e0e0e0;
        border-radius: 0.3rem;
        background: #fff;
        padding: 0.3rem 0;
    }
    /deep/ .van-field__label{
        width: 6.5rem;
        font-size: 0.9rem;
        color: #666;
    }
    .item-title /deep/ .van-cell__title{
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 0.9375rem;
    }
    .btn{
        padding-top: 1.5rem;
        padding-bottom: 1rem;
        width: 100%;
        justify-content: space-around;
        display: flex;
        position: fixed;
        bottom: 0px;
        background: rgb(255, 255, 255);
    }
</style>
